<template>
    <div class="passwordChange">
      <b-row class="mt-5">
        <b-col md="8" offset-md="2" lg="6" offset-lg="3">
          <b-card title="找回密码" class="text-left">
            <b-form>
              <b-form-group label="旧密码">
                <b-form-input
                  v-model="$v.user.password.$model"
                  type="password"
                  placeholder="输入旧密码"
                ></b-form-input>
                <b-form-invalid-feedback :state="validateState('password')">
                  密码需大于等于6位小于等于20位
                </b-form-invalid-feedback>        
              </b-form-group>
    
              <b-form-group label="新密码">
                <b-form-input
                  v-model="$v.user.newPassword.$model"
                  type="password"
                  placeholder="输入新的密码"
                  :state="validateState('newPassword')"
                ></b-form-input>
                <b-form-invalid-feedback :state="validateState('newPassword')">
                  密码需大于等于6位小于等于20位
                </b-form-invalid-feedback>  
              </b-form-group>
    
              <b-form-group label="确认新密码">
                <b-form-input
                  v-model="$v.user.confirmPassword.$model"
                  type="password"
                  placeholder="确认新的密码"
                  :state="validateState('confirmPassword')"
                ></b-form-input>
                <b-form-invalid-feedback :state="validateState('confirmPassword')">
                  密码需大于等于6位小于等于20位
                </b-form-invalid-feedback>  
              </b-form-group>

              <b-form-group>
                <b-button 
                  variant="outline-primary" 
                  @click="passwordChange"
                  block>
                  修改密码
                </b-button>
              </b-form-group>
  
            </b-form>
          </b-card>
        </b-col>
      </b-row>
    </div>
</template>
    
<script>
import requestService from '@/service/requestService'
import { required, minLength, maxLength } from 'vuelidate/lib/validators'
import { mapState } from 'vuex'
export default {
    computed: mapState({
    userName: (state) => state.userModule.userName,
    }),
    data() {
        return {
            user: {
                password:'',
                newPassword:'',
                confirmPassword:'',
            },
        }
    },
    validations: {
        user: {
            password : {
                required,
                minLength : minLength(6),
                maxLength : maxLength(20),
                
            },
            newPassword : {
                required,
                minLength : minLength(6),
                maxLength : maxLength(20),
            },
            confirmPassword : {
                required,
                minLength : minLength(6),
                maxLength : maxLength(20),
            },
        }
      },
    methods: {
        validateState(name) {
          const { $dirty, $error } = this.$v.user[name]
          return $dirty? !$error : null
        },
        passwordChange() {
          //验证数据
          this.$v.user.$touch()
          if (this.$v.user.$anyError) {
            return ;
          }

          //数据打包
          var userRequest = {
            "username": this.userName,
            "phoneNumber": '',
            "password": this.user.password,
            "newPass": this.user.newPassword,
            "surePass": this.user.confirmPassword,
          }
          //请求(等待后端添加处理路由)
          requestService.post('updatePassword', userRequest).then((res) => {
            this.$bvToast.toast(res.data.data2.newPass, {
              title: '你的新密码为',
              variant: 'info',
              solid: true,
            })          
          }).catch((err) => {
            console.log(err)
            this.$bvToast.toast(err.response.data.msg, {
              title: '数据验证错误',
              variant: 'danger',
              solid: true,
            })
          })
        }
      }
    }
</script>
    
<style lang="scss" scoped>
    
</style>